
<div class="app-content-body ">   
    <div class="bg-light lter b-b wrapper-md hidden-print">
      <h1 class="m-n font-thin h3">会员人脉关系管理</h1>
    </div>
  <div class="crud-container crud-reset">
	<div class="vip_class row vip-info">
		
	</div>
	<div class="tabs">
		<div class="tabs_title">
			<span data-level="1" class="first">一级人脉</span>
			<span data-level="2" >二级人脉</span>
			<span data-level="3" >三级人脉</span>
		</div>
		<div class="tabs_content">
			<div class="tabs_list">
				<div class="row vipcontacts">
					<div class="input-group col-sm-3 pull-right">
			          <input type="text" class="input-sm form-control" placeholder="Search">
			          <span class="input-group-btn">
			            <button class="btn btn-sm btn-default" type="button">搜索</button>
			          </span>
			        </div>
				</div>
				<div class="row">
					<div class="member-list"></div>
				</div>
			</div>
		</div>
	</div>
  </div>
</div>

<script id="member-info" type="x-tmpl-mustache">
<div class="col-sm-6 col-xs-12">
	<dl>
		<dt></dt>
		<dd>
			<span class="name">{{nickname}}</span>
			<span class="phone_call">{{mobile}}</span>
			<span class="vip_id">No. {{member_card}}</span>
		</dd>
	</dl>
</div>
<div class="col-sm-6 col-xs-12">
	<div class="row pull-right pull-none-xs">
		<div class="form_hier">
			<div class="col-sm-4 col-xs-4">
				<i>{{level1}}</i>
				<em>一级返利</em>
			</div>
			<div class="col-sm-4 col-xs-4">
				<i>{{level2}}</i>
				<em>二级返利</em>				
			</div>
			<div class="col-sm-4 col-xs-4">
				<i>{{level3}}</i>
				<em>三级返利</em>		
			</div>
		</div>
	</div>
</div>
</script>

<script id="member-list" type="x-tmpl-mustache">
<div class="tabs_list">
	<div class="row vipcontacts">
		<div class="input-group col-sm-3 pull-right">
          <input type="text" class="input-sm form-control" placeholder="Search">
          <span class="input-group-btn">
            <button class="btn btn-sm btn-default" type="button">搜索</button>
          </span>
        </div>
	</div>
	<div class="row">
		<div class="member-list"></div>
	</div>
</div>
</script>

<script>
function showTab(level, userId) {
	$(".tabs_content").html(Mustache.render($("#member-list").html()));
	$(".tabs_content .member-list").dxDataGrid({
		dataSource: $.crudStore(API('user-relations', {level: level, user_id: userId})),
		columns: [{
			dataField: 'user.nickname',
			caption: '会员昵称'
		}, {
			dataField: 'user.uname',
			caption: '会员姓名'
		}, {
			dataField: 'user.mobile',
			caption: '手机号'
		}, {
			dataField: 'user.order_total',
			caption: '订单数量'
		},{
			dataField: 'user.order_total',
			caption: '订单金额'
		}, {
			dataField: 'user.created_at',
			caption: '加入时间'
		}, {
			caption: '操作',
			cellTemplate: function(c, ci) {
				$('<a href="#/members/orders/' + ci.data.id + '">订单列表</a>').appendTo(c);
			}
		}]
	});
}

 $(function () {
    $("#content").one("route.loaded", function(e, context) {
      var store = $.crudStore(API("members")), id = context.params.id;

      store.byKey(id).then(function (resp) {
      	$(".vip-info").html(Mustache.render($("#member-info").html(), resp));
      });

      $(".tabs_title span").click(function () {
  		var level = $(this).data('level');

  		showTab(level, id);
  	  });

  	  showTab(1, id);
  	});



  	function tabs(tabTit,on,tabCon){
        $(tabTit).children().click(function(){
            $(this).addClass(on).siblings().removeClass(on);
            var index = $(tabTit).children().index(this);
           	$(tabCon).children().eq(index).show().siblings().hide();
    	});
	};
	tabs(".tabs_title","first",".tabs_content");
});
</script>